<template>
	<view class="container">
		<view class="register-form">
			<!-- 基础表单校验 -->
			<uni-forms ref="registerRef" :rules="rules" :modelValue="registerForm">
				<uni-forms-item name="userName">
					<uni-easyinput :style="inputStyle" prefixIcon="person" v-model="registerForm.userName"
						placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item name="userPhone">
					<uni-easyinput :style="inputStyle" prefixIcon="person" v-model="registerForm.userPhone"
						placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="registerForm.password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="passwordConfirm">
					<uni-easyinput prefixIcon="locked" type="password" v-model="registerForm.passwordConfirm"
						placeholder="再次确认密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="default" @click="onclick('registerRef')">注册</button>
		</view>
		<!-- 有账号，去登录  -->
		<view class="to-login">有账号，<text @click="toLogin">去登录</text></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//输入框的样式
				inputStyle: {
					color: "#55aa00",
					borderColor: "#55aa00"
				},
				registerForm: {
					userName: '',
					userPhone: '',
					password: '',
					passwordConfirm: ''
				},
				rules: {
					userName: {
						rules: [{
								required: true,
								errorMessage: '姓名不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2 || value.length > 50) {
										callback('请输入 2 位以上且不超过 50 位的字符');
									}
									return true;
								}
							}
						]
					},
					userPhone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									// 定义手机号正则表达式
									const phoneRegex = /^1[3456789]\d{9}$/;
									if (!phoneRegex.test(value)) {
										callback('请输入正确的手机号码');
									}
									return true;
								}
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '密码不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const numberRegex = /^\d{6,16}$/;
									if (!numberRegex.test(value)) {
										callback('请输入 6 到 16 位的纯数字密码');
									}
									return true;
								}
							}
						]
					},
					passwordConfirm: {
						rules: [{
								required: true,
								errorMessage: '确认密码不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const password = data.password;
									if (value !== password) {
										callback('两次输入的密码不一致');
									} else {
										const numberRegex = /^\d{6,16}$/;
										if (!numberRegex.test(value)) {
											callback('请输入 6 到 16 位的纯数字密码');
										}
									}
									return true;
								}
							}
						]
					}
				},
			}
		},
		methods: {
			onclick(ref) {
				this.$refs.registerRef.validate().then(res => {
					this.registerSubmit(res)
				}).catch(err => {
					console.log('err', err);
				})
			},
			async registerSubmit(res) {
				const response = await this.$api.user.register(res);
				if (response.data.code === 200) {
					uni.showToast({
						title: '注册成功',
						duration: 2000,
						icon: 'success'
					});
					setTimeout(() => {
						// 在提示显示一段时间后执行回调函数
						this.toLogin()
					}, 2000);
				
				}
			},
			toLogin() {
				uni.redirectTo({
					url: "/pages/personal/login"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		width: 100vw;
		background: url('https://file.boyoulsh.com/ywh/1.png');
		background-size: cover;

		.register-form {
			position: relative;
			top: 450upx;
			margin: 0 100upx;

			button {
				background: green;
				border-radius: 45upx;
			}
		}

		.to-login {
			position: absolute;
			bottom: 50upx;
			text-align: center;
			width: 100%;
			font-size: 30upx;

			text {
				color: #55aa00;
				font-size: 30upx;
			}
		}
	}
</style>